<template>
  <div>
    <el-dialog :visible="showDialog" :title="isadd? '新增部门': '编辑部门' " @close="close">
      <el-form ref="form" label-width="120px" :model="formDate" :rules="rules">
        <el-form-item prop="name" label="部门名称">
          <el-input v-model="formDate.name" placeholder="2-10个字符" size="mini" style="width:80%" />
        </el-form-item>
        <el-form-item prop="code" label="部门编码">
          <el-input v-model="formDate.code" size="mini" placeholder="2-10个字符" style="width:80%" />
        </el-form-item>
        <el-form-item prop="managerId" label="部门负责人">
          <el-select v-model="formDate.managerId" size="mini" style="width:80%" placeholder="请选择负责人">
            <!-- 使用v-for循环遍历 拿到的部门负责人数组
             :label代表每个选项需要显示的字段名称
             :value是把选择部门负责人的id存到了与el-select双向数据绑定的数据变量中
             -->
            <el-option
              v-for="item in managerList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="introduce" label="部门介绍">
          <el-input v-model="formDate.introduce" type="textarea" :rows="4" size="mini" style="width:80%" placeholder="10-100个字符" />
        </el-form-item>

        <el-row type="flex" justify="center" align="middle">

          <el-button size="small" type="success" @click="addSonDepartment">确认</el-button>
          <el-button size="small" @click="close">取消</el-button>

        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getDepartment, getManagers, addDepartment, getDetails, updateDepartment } from '@/api/department'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    // 传过来的父级部门的id 父级的id对应子级的pid
    currentNodeId: {
      type: [Number, String],
      default: null
    },
    isadd: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 数据对象
      formDate: {
        code: '', // 部门编码
        introduce: '', // 部门介绍
        managerId: '', // 部门负责人id
        name: '', // 部门名称
        pid: '' // 父级部门id
      },
      // 规则数组
      rules: {
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { max: 10, min: 2, message: '编码应该在2-10位', trigger: 'blur' },
          // 自定义校验规则 判断部门中有没有重复的 如果有提示错误信息没有就正常指向
          {
            trigger: 'blur',
            validator: async(rule, value, callback) => {
              // value就是在输入框输入的内容
              // 调获取部门列表接口的函数
              let res = await getDepartment()
              // 区分编辑场景 把自身的数据排除 以免数据重复
              if (this.formDate.id) {
                //  把不是自身的数据 过滤出来
                res = res.filter(item => item.id !== this.formDate.id)
              }
              // 判断拿到的数据数组中的编码与value存不存在重复
              if (res.some(item => item.code === value)) {
                callback(new Error('部门编码存在重复'))
              } else {
                callback()
              }
            }
          }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { max: 100, min: 1, message: '部门介绍应该在1-10-位', trigger: 'blur' }
        ],
        managerId: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { max: 10, min: 2, message: '部门名称应该在8-10位', trigger: 'blur' },
          {
            trigger: 'blur',
            validator: async(rule, value, callback) => {
              // value就是在输入框输入的内容
              // 调获取部门列表接口的函数
              let res = await getDepartment()
              if (this.formDate.id) {
                //  把不是自身的数据 过滤出来
                res = res.filter(item => item.id !== this.formDate.id)
              }
              // 判断拿到的数据数组中的编码与value存不存在重复
              if (res.some(item => item.name === value)) {
                callback(new Error('部门名称存在重复'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      // 定义负责人列表数组
      managerList: []
    }
  },
  created() {
    this.getManagersPeople()
  },
  methods: {
    close() {
      // 子传父 将dialog关闭
      this.$emit('update:showDialog', false)
      this.$refs.form.resetFields()
      this.formDate = this.$options.data().formDate
    },

    // 获取部门负责人
    async getManagersPeople() {
      const res = await getManagers()
      this.managerList = res
    //   console.log(res)
    },
    // 新增子部门
    addSonDepartment() {
    // 对表单进行校验
      this.$refs.form.validate(async isok => {
        if (isok) {
          // 判断是编辑还是新增
          if (this.formDate.id) {
            await updateDepartment(this.formDate)
            this.$message.success('修改成功')
          } else {
          // 如果表单校验通过就调新增接口
          // 将父级id给他这次新增部门的子级部门的pid,并且将此处通过校验的数据对象拆开
          // 新增部门
            await addDepartment({ ...this.formDate, pid: this.currentNodeId })
            this.$message.success('添加成功')
          }
          // 如果新增部门成功 要通知父组件 告诉父组件需要调取最新的数据进行近一步的页面渲染
          this.$emit('fuckchange')
          // 将表单重置关闭dialog
          this.close()
        }
      })
    },
    // 编辑部门
    async eidtDepartment() {
    //   alert(this.currentNodeId)
      const res = await getDetails(this.currentNodeId)
      this.formDate = res
    //   console.log(this.formDate)
    // 编辑部门 与 新增部门 的数据对象的区别就是 编辑部门状态的数据对象 是有id属性的
    }
  }
}
</script>

<style>

</style>
